<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title th:text="${@module.get('sysConfig').SITE_NAME}"></title>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="stylesheet" th:href="@{/libs/bootstrap/bootstrap.min.css}"/>
	<link rel="stylesheet" th:href="@{/libs/semantic-ui/semantic.min.css}" />
	<link rel="stylesheet" th:href="@{/css/exam-common.css}"/>
	<link rel="stylesheet" th:href="@{/css/web-common.css}"/>
	<script th:src="@{/libs/jquery/jquery.min.js}"></script>
	<script th:src="@{/libs/jquery/jquery.countdown.min.js}"></script>
	<script th:src="@{/libs/bootstrap/bootstrap.min.js}"></script>
    <script th:src="@{/libs/semantic-ui/semantic.min.js}"></script>
    <script th:src="@{/libs/layer/layer.js}"></script>
    <script th:src="@{/js/core.js}"></script>
    <script th:src="@{/js/detail.js}"></script>
</head>
<body>
<header id="header" class="nav-header">
	<div th:replace="home/fragments/navbar :: navbar(activeUri='examiantion')"></div>
</header>
<div class="exam-content" style="padding-bottom:1em;margin-top:10px">
	<div class="ui header container">
	    <div class="ui large breadcrumb" th:each="exam:${data['exam']}">
	        <a class="section" href="/exam/examination"><i class="home icon"></i>在线考试列表</a>
	        <i class="right chevron icon divider"></i>
	        <div class="section" th:value="${exam.id}" th:text="${exam.title}"></div>
	    </div>
	</div>
	<div class="ui problemDetail container" th:each="exam:${data['exam']}">
	    <div class="ui grid">
	        <div class="ten wide column">
	            <div class="row" style="padding-left: 2.5em">
	                <div class="ui stacked segment">
	                    <h4 class="ui horizontal divider header"><i class="help circle icon"></i>题目描述</h4>
	                    <label id="currentQuetionTitle"></label>
	                    <div class="grouped fields" id="currentQuestionAnswer"></div>
	                </div>
	            	<div id="preAndNextButton"></div>
	            </div>
	        </div>
	        
	        <div class="five wide column" style="margin-left:2em">
	            <div class="row">
	                <table class="ui table">
	                    <tbody>
	                    <tr>
	                        <td><span style="font-weight: bolder;">考生学号:</span></td>
	                        <td><span th:text="${user.username}"></span></td>
	                    </tr>
	                    <tr>
	                        <td><span style="font-weight: bolder;">当前考生:</span></td>
	                        <td><span th:text="${user.nickname}"></span></td>
	                    </tr>
	                    <tr>
	                        <td><span style="font-weight: bolder;">剩余时间:</span></td>
	                        <td><span style="font-weight: bolder;color:red;" id="examTimeCountdown"></span></td>
	                    </tr>
	                    <tr>
	                        <td><span style="font-weight: bolder;">开始时间:</span></td>
	                        <td><span th:text="${#dates.format(exam.startTime, 'yyyy-MM-dd HH:mm:ss')}"></span></td>
	                    </tr>
	                    <tr>
	                        <td><span style="font-weight: bolder;">结束时间:</span></td>
	                        <td><span th:text="${#dates.format(exam.endTime, 'yyyy-MM-dd HH:mm:ss')}"></span></td>
	                    </tr>
	                    <tr>
	                        <td><span style="font-weight: bolder;">总分:</span></td>
	                        <td><span th:text="${exam.totalScore}"></span></td>
	                    </tr>
	                    </tbody>
	                </table>
	            </div>
	            <div class="row" style="margin-top: 1em;">
	                <div class="ui segment">
	                    <div class="title">答题卡</div>
	                    	<div class="content ui segment" id="currentQuestionButton">
	                    </div>
	                    <div class="extra content">
	                        <button type="button" onclick="examDetailPage.finishExamAction()" class="ui positive button">交卷</button>
	                    </div>
	                </div>
	            </div>
            </div>
	   </div>
   </div>
</div>
<div th:replace="home/fragments/footer :: copyrightExamWeb"></div>
<div class="return_top"><a class="fa fa-arrow-up"></a></div>
<script type="text/javascript" th:inline="javascript">
	var headerMain = document.getElementById('headerMain');
	headerMain.setAttribute("style","background:#4F94CD");
	var exam = [[${data['exam']}]];
	$(function(){
		examDetailPage.init(exam);
	});
</script>
</body>
</html>